import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'
import "taro-ui/dist/style/components/nav-bar.scss";
import "taro-ui/dist/style/components/icon.scss";
import './index.less'

export default function MineDeposit(props) {
  const [list,setList] = useState([])
  return (
    <View className="mine-deposit" style={{paddingTop:Taro.getSystemInfoSync().statusBarHeight+'PX'}}>
      <AtNavBar title={process.env.TARO_ENV != 'alipay'?'我的押金':''} leftIconType={process.env.TARO_ENV != 'alipay'?'chevron-left':''} onClickLeftIcon={()=>{
        Taro.navigateBack()
      }} color='#fff' border={false} />
      <View className="deposit-header">
        <View className="header-span">我的余额(元)</View>
        <View className='h1'>0.00</View>
        <View className="header-h3">您未缴纳押金</View>
        <View className="header-p">使用完成后，押金可随时退回</View>
      </View>
      <View className="deposit-list">
        <View className="list-title">余额变动明细</View>
        {list.length?
        list.map(item=>{
          return <View className="list-item" key={item}>
            <View className="item-title">
              <View className="dot h3">英雄联盟LPL 2023夏季赛总局赛</View>
              <View className='p'>2022-3-25</View>
            </View>
            <View className="item-info">
              <View className='h3'>-800.00</View>
              <View className='p'>余额 16600.00</View>
            </View>
          </View>
        }):
        <View className="var-empty" v-else>
          <Image src={require('@/images/mine/empty.svg')} style={{width: 80,height: 80}} mode="widthFix"></Image>
          <View className='p'>暂无明细</View>
        </View>}
      </View>
    </View>
  )
}